<template>
  <div>
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="设备">
        <span>{{ getGroupName() }}</span>
      </el-form-item>
      <el-form-item label="测点">
        <span>{{ point.pointName }}</span>
      </el-form-item>
      <el-form-item label="测点编码" v-if="false">
        <span>{{ point.pointCode }}</span>
      </el-form-item>
      <el-form-item label="传感器">
<!--        <el-input v-model="deviceCode" placeholder="请输入IoT设备编码"/>-->
        <el-select filterable clearable v-model="deviceCode" placeholder="请选择传感器编码">
          <el-option v-for="item in deviceList" :key="item.deviceCode" :label="item.deviceCode" :value="item.deviceCode"/>
        </el-select>
      </el-form-item>
      <el-descriptions class="margin-top" :column="3" border>
        <el-descriptions-item>
          <template slot="label"> X </template>
          <el-select v-model="form.x" placeholder="请选择轴向">
            <el-option v-for="item in axial" :key="item.value" :label="item.label" :value="item.value"/>
          </el-select>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> Y </template>
          <el-select v-model="form.y" placeholder="请选择轴向">
            <el-option v-for="item in axial" :key="item.value" :label="item.label" :value="item.value"/>
          </el-select>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> Z </template>
          <el-select v-model="form.z" placeholder="请选择轴向">
            <el-option v-for="item in axial" :key="item.value" :label="item.label" :value="item.value"/>
          </el-select>
        </el-descriptions-item>
      </el-descriptions>
    </el-form>
    <div class="bottom_wrap">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </div>
</template>

<script>
import {getPointByCode, queryDevice, updatePoint} from "@/api/equip";

export default {
  name: "point",
  props: ["point", 'selectedEquip', "equipList"],
  data() {
    return {
      axial: [{
        "label": "H",
        "value": "H"
      }, {
        "label": "A",
        "value": "A"
      }, {
        "label": "V",
        "value": "V"
      }, {
        "label": "X",
        "value": "X"
      }, {
        "label": "Y",
        "value": "Y"
      }, {
        "label": "Z",
        "value": "Z"
      }, {
        "label": "径向",
        "value": "径向"
      }, {
        "label": "切向",
        "value": "切向"
      }, {
        "label": "轴向",
        "value": "轴向"
      }, {
        "label": "无效",
        "value": "无效"
      }],
      deviceList: [],
      deviceCode: null,
      form: {
        x: 'H',
        y: 'A',
        z: 'V'
      }
    }
  },
  watch: {
    point: {
      handler: function (val) {
        this.$nextTick(() => {
          this.getPoint()
        })
      },
      deep: true, // 深度监听
      immediate: true
    }
  },
  mounted() {
    this.queryDevice();
    this.getPoint();
  },
  methods: {
    getGroupName() {
      if (!this.selectedEquip) return null;
      let equipCode = this.selectedEquip[this.selectedEquip.length - 1];
      let find1 = this.equipList.find(item => item.equipmentCode === equipCode);
      if (!find1) return null;
      let find2 = this.equipList.find(item => item.equipmentId === find1.parentId);
      if (!find2) return null;
      let find3 = this.equipList.find(item => item.equipmentId === find2.parentId);
      return find3 ? find3.equipmentName + "-" + find2.equipmentName + "-" + find1.equipmentName: null;
    },
    queryDevice() {
      queryDevice().then(res => {
        this.deviceList = res.data;
      });
    },
    getPoint() {
      getPointByCode(this.point.pointCode).then(res => {
        this.form = JSON.parse(res.data.axial);
        this.deviceCode = res.data.deviceCode;
      });
    },
    submitForm() {
      let values = Object.values(this.form);
      // 1.如果找到属性值出现大于1次的情况 , 则终止提交(排除无效值选项)
      if (values.find((item) => {
        if (item === "无效") return false;
        return values.filter((a) => a === item).length > 1;
      })) {
        return this.$modal.msgError("方向轴不能设置重复值");
      }
      // 2.无效值不能出现三次
      if (values.filter((item) => item === "无效").length === 3) {
        return this.$modal.msgError("三个方向的值不能同时为'无效'");
      }
      // if (isNullOrEmpty(this.deviceCode)) {
      //   return this.$modal.msgError("传感器编码不可为空");
      // }
      let data = {
        pointCode: this.point.pointCode,
        pointName: this.point.pointName,
        deviceCode: this.deviceCode,
        axial: JSON.stringify(this.form)
      }
      if (data.pointCode != null) {
        updatePoint(data).then(res => {
          this.$modal.msgSuccess("修改成功");
          this.$emit("cancel", data);
        });
      }
    },
    cancel() {
      this.$emit("cancel", null);
    }
  }
}
</script>

<style scoped>
.bottom_wrap {
  margin-top: 10px;
  text-align: right;
}
</style>